<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Insert title here</title>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/bootstrap/css/bootstrap.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/plugins/font-awesome/css/font-awesome.css">
 <link   href="${pageContext.request.contextPath}/assets/plugins/layer/skin/default/layer.css" rel="stylesheet" type="text/css" /> 
 <link   href="${pageContext.request.contextPath}/assets/plugins/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css" />    
  <!--[if lt IE 9]>
    <script src="/bg/assets/plugins/html5shiv/html5shiv.min.js"></script>
    <script src="/bg/assets/plugins/respond/respond.min.js"></script>
  <![endif]-->
  
  
  <style type="text/css">
     body,ul,li{
	     list-style: none;
	     padding:0;
	     margin:0;
	  }
      body{
         background-color:#fff;
      }

      .top-title{
         height:50px;
         line-height:50px;
         background-color:rgba(0,0,0,0.5);
         color:#fff;
          background-color:#429BFE;
         font-size:16px;
         text-align: center;
         margin-bottom:12px;
         cursor: pointer;
         position: relative;
      }
      
    .top-reback{
       float:right;
       font-size:14px;
       padding:0 10px;
       cursor:pointer;
       position: absolute;
       top:0;
       right:0;
       font-size:12px;
    }        
      
      .back-home{
         height:50px;
         float:right;
         line-height:50px;
      }
      .back-home>a{
          height:50px;
          line-height:50px;
          padding:0 30px;
          font-size:12px;
          cursor:pointer;
          color:#fff;
      }      
      
      .top-title > i{
         display: inline-block;
         padding-right:10px;
      }
      .condition-item{
        font-size:12px;
        line-height:30px;
        font-weight:600;
        font-size:16px;
      }
      
      .item-lable{
         font-weight:300;
      }
      
      .content-list{
         padding:10px;
         /* background-color:#f5f5f5; */
          border:1px solid #f1f1f1; 
         margin-top:15px;
         text-align:left;
         /* border-bottom:1px solid #f1f1f1; */
      }
      
      
      .content-list+.content-list{
         
      }
      .content-list > h4{
      		text-align: center;	
            font-size:18px;
            font-weight: 600;
            color:#3D9171;
            padding-bottom:20px;
            
      }
      .content-list > p{
          /* text-indent:2em; */
          font-size:12px;
          line-height: 22px;
          padding:0 10px;
          font-size:16px;
          line-height:25px;
      }
      
      .bottom-btn{
         text-align: center;
         padding:20px 0;
      }
      
      
  @media(max-width: 480px){
      .top-title{         
		font-size:12px;
      }
    .top-reback{
       font-size:12px;
    }
  }
  
  @media(min-width: 580px){
    
	  .content-list-box{	  
	      
	  }
    
  }  
  
  @media(max-width: 580px){
    
	  .content-list-box{
	      padding:0 20px;
	  }
    
  }    
  
  
  @media(min-width: 1366px){
  .container{
       width:1000px;
  }
  .content-list-box{
     width:1000px;
     margin:0 auto;
  }
  
  }
  @media(min-width: 1200px){
    .container{
       width:1000px;
  }
  .content-list-box{
     width:1000px;
     margin:0 auto;
  }  
  }
  
  @media(min-width: 1000px) and (max-width: 1200px) {
    .container{
       width:800px;
    }
  .content-list-box{
     width:800px;
     margin:0 auto;
  }  
  }  
  
  @media(min-width: 800px) and (max-width: 1000px) {
    .container{
       width:700px;
    }
  .content-list-box{
     width:700px;
     margin:0 auto;
  }  
  }    
  
  </style>
  

</head>
<body>
  
   <div class="top-title">
        <!-- <i class="fa fa-user-o"></i> -->项目申请
        <!-- <div class="back-home"><a href="#" class="back-home-btn">回到首页</a></div> -->
	      <span class="top-reback" style="float:right;">
	                       返回
	         <i class="glyphicon glyphicon-share-alt"></i>
	      </span>          
   </div>
   <div class="top-condition container">
       <div class="row clearfix">
     <!--   CODE,NAME,SEX,MARRIAGE,AGE_START,AGE_END,DISEASE,START_DATE,STATUS,SPECIALITIES,categlory,
       categlory_name,STATE -->
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">项目类别：<span class="item-lable" id="categlory_name"><span></div>
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">项目状态：<span class="item-lable"  id="STATUS"><span></div>
         <!--  <div class="col-xs-12 col-md-3 condition-item">招募人数：<span id="">2000<span></div> -->
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">性别要求：<span class="item-lable"  id="SEX"><span></div>
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">年龄要求：<span class="item-lable"  id="AGE"><span></div>
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">婚姻要求：<span class="item-lable"  id="MARRIAGE"><span></div>
          <div class="col-xs-12 col-sm-6 col-md-3 condition-item">适应专业：<span class="item-lable"  id="SPECIALITIES"><span></div>
           <div class="col-xs-12 col-sm-6 col-md-3 condition-item">适应疾病：<span class="item-lable"  id="DISEASE"><span></div>                             
       </div>     
        <div class="row clearfix">
          <div class="col-xs-12 col-sm-6 col-md-3  condition-item">联系人：<span class="item-lable"  id="CONTACTS"><!-- 申升 --><span></div>
          <div class="col-xs-12 col-sm-6 col-md-4  condition-item">联系方式：<span class="item-lable"  id="PHONE_NUMBER"><!-- 158784587954 --><span></div>                              
       </div>  
       <div class="row clearfix">
          <div class="col-xs-12  condition-item">起止时间：<span class="item-lable"  id="START_DATE"><span></div>                              
       </div>                
   </div>
   
   
   <div class="content-list-box">
	   <div class="content-list">
	       <h4>项目介绍</h4>
	       <p id="INTRODUCE">
			       <!-- 项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介
			       绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项
			       目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍
			       项目介绍项目介绍项目介绍项目介绍项目介绍 -->
	       </p>
	   </div> 
	   <div class="content-list">
	       <h4>参考标准</h4>
	       <p id="STANDARD">
			       <!-- 项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介
			       绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项
			       目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍
			       项目介绍项目介绍项目介绍项目介绍项目介绍 -->
	       </p>
	   </div>  
	   <div class="content-list">
	       <h4>关于研究</h4>
	       <p id="RESEARCH">
			       <!-- 项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介
			       绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目
			       介绍项目介绍项
			       目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍项目介绍
			       项目介绍项目介绍项目介绍项目介绍项目介绍 -->
	       </p>
	   </div>   
   </div>
   
<!-- 完善个人信息界面 -->   
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">个人信息</h4>
      </div>
      <div class="modal-body clearfix">  
               <div class="col-sm-6 ">
                    <span class="hint">姓名：</span>
	                <div class="form-group">
	                    <input class="form-control" type="text"  id="username" name=""username"" />
	                </div>                  
               </div>   
               <div class="col-sm-6">
                    <span class="hint"> 身份证号： </span>
	                <div class="form-group">
	                    <input class="form-control" type="text"  id="id_number" name="id_number" /> 
	                </div>               
               </div>
               <div class="col-sm-6" style="margin-bottom:15px;">
                    <span class="hint">性别： </span>
                    <select id="user_sex" name="user_sex" class="form-control">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>                
               </div>      
               <div class="col-sm-6 ">
                    <span class="hint">出生日期： </span>
	                <div class="form-group">	                	                   
	                    <input class="form-control placeholder-no-fix" type="text" id="user_birth"  name="user_birth" />
	                </div>                  
               </div>                         
               <div class="col-sm-6"  style="margin-bottom:15px;">
                   <span class="hint">婚姻状态： </span>
                    <select id="user_single" name="user_single" class="form-control">
                        <option value="2">单身</option>
                        <option value="1">已婚</option>
                    </select>                
               </div>
               <div class="col-sm-6">
                    <span class="hint"> 身高(cm)： </span>
	                <div class="form-group">
	                    <input class="form-control" type="text"  id="user_height" name="user_height" /> 
	                </div>               
               </div>
               <div class="col-sm-6 ">
                    <span class="hint">体重(kg)： </span>
	                <div class="form-group">
	                    <input class="form-control placeholder-no-fix" type="text"  id="user_weight" name="user_weight" />
	                </div>                  
               </div>  
               <div class="col-sm-6"  style="margin-bottom:15px;">
                    <span class="hint">省份： </span>
                    <select id="user_province" name="user_province" class="form-control">
                        <option value="-1" selected="true">"请选择省"</option>
                    </select>               
               </div>                             
               <div class="col-sm-6 "  style="margin-bottom:15px;">
                    <span class="hint">城市： </span>
                    <select id="user_city" name="user_city" class="form-control">
                        <option value="-1" selected="true">"请选择市"</option>
                    </select>                 
               </div>               
               <div class="col-sm-6 ">
                    <span class="hint">详细地址 </span>
	                <div class="form-group">	                   
	                    <input class="form-control placeholder-no-fix" type="text"  id="user_address" name="user_address" />
	                </div>                   
               </div>   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="save-user-info">保存</button>
      </div>
    </div>
  </div>
</div>
   
   
   <div class="bottom-btn"><button type="button" class="btn btn-danger" id="apply">点击申请</button></div>            
   <input type="hidden" id="code" value="${CODE}">


  <script src="${pageContext.request.contextPath}/assets/js/jquery-1.11.2.min.js" charset="utf-8" type="text/javascript"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins//layer/mobile/layer.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/layer/layer.js"></script>
  <script src="${pageContext.request.contextPath}/assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>       
  <script type="text/javascript">
     var page = {
    		 init:function(){
    			 this.initEvents().getItemInfo();
    		 },
    		 initEvents:function(){
    			 var that = this;
    			 
    			 
    			 $("#user_province").on("change",function(){
    				 that.initCityInfo($(this).val());
    			 })
    			 
    			 $("#save-user-info").on("click",function(){
    				 that.applySaveUserInfo();
    			 })
    			 
   			   $(".top-reback").on("click",function(){
   	   				window.location.href="${pageContext.request.contextPath}/Portal/portalIndex.do?rnd="+Math.random();
   			   })    			 
    			 
    			 
    			 var params ={};
    			 params.reUrl="applyPage";
    			 
    			 $("#apply").on("click",function(){
        			 $.post("${pageContext.request.contextPath}/Portal/portal/CKL01.do",function(result){        				 
        				 if(result.state==1){
            				 layer.confirm('确认申请此项目', {
           					  btn: ['确定','取消'] //按钮
           					}, function(){
           					    that.applyItem();           						
           					}, function(){
           					  layer.msg('已取消')
           					});
        				 }else{
            				layer.confirm('当前用户还未登陆,请登录', {
           					  btn: ['确定','取消'] //按钮
           					}, function(){
           						window.location.href="${pageContext.request.contextPath}/Portal/portalLogin.do?reUrl=volunteeApply&code="+$("#code").val()+"&rnd="+Math.random();
           					}, function(){
           					  layer.msg('已取消')
           					});
        				 }
        			 }) 
    			 })    			 
    			 return that;
    		 },
    		 applySaveUserInfo:function(){
    			 var params = {};    				
 				 params.NAME = $("#username").val();
				 //params.PASSWORD = $("#password").val();
				 params.ID_NUMBER = $("#id_number").val();
				 params.SEX=$("#user_sex  option:selected").val();
				 //params.PHONE_NUMBER = $("#phone_number").val();
				 params.HEIGHT = $("#user_height").val();
				 params.WEIGHT = $("#user_weight").val();
				 params.PROVINCE = $("#user_province  option:selected").val();
				 params.PROVINCE_NAME = $("#user_province  option:selected").text();
				 params.CITY = $("#user_city  option:selected").val();
				 params.CITY_NAME = $("#user_city  option:selected").text();
				 
				 params.ADDRESS = $("#user_address").val();
				 if($.trim(params.ADDRESS)==""){
					 layer.msg("请填写详细地址!");
					 return false;
				 }	
				 params.MARRIAGE = $("#user_single  option:selected").val();
				 
				 params.BIRTHDAY = $("#user_birth").val();
				 if($.trim(params.BIRTHDAY)==""){
					 layer.msg("请选择出生日期!");
					 return false;
				 }
				 
	 
  				  if($.trim(params.NAME)==""){    
  					layer.msg("对不起，姓名不能为空!");//请将“字符串类型”要换成你要验证的那个属性名称！    
  					return false
  				  }
/* 				 var  regpassword=/^[a-zA-Z0-9_]+$/; 
  				 if(!regpassword.test(params.PASSWORD) || $.trim(params.PASSWORD)==""){    
  					layer.msg("对不起，请输入正确的密码!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } */
				 var  regid_number=/^\d{15}|\d{18}$/; 
  				 if(!regid_number.test(params.ID_NUMBER) || $.trim(params.ID_NUMBER)==""){    
  					layer.msg("对不起，请输入正确的身份证号!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } 
				 var  reguser_height=/^[0-9]*$/; 
  				 if(!reguser_height.test(params.HEIGHT) || $.trim(params.HEIGHT)==""){    
  					layer.msg("对不起，请输入身高!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 } 
				 var  reguser_height=/^[0-9]*$/; 
  				 if(!reguser_height.test(params.WEIGHT) || $.trim(params.WEIGHT)==""){    
  					layer.msg("对不起，请输入体重!");//请将“字符串类型”要换成你要验证的那个属性名称！
  					return false
  				 }
    			 $.post("${pageContext.request.contextPath}/Portal/portal/UAU01.do?rnd="+Math.random(),params,function(result){
    				 if(result.state==200){
    					 $('#myModal').modal("hide")
    					 layer.msg("保存成功,请重新申请");
    				 } else {
    					 layer.msg(result.msg);
    					 return false;
    				 }        				 
    			 })  				 
    		 },
    		 applyItem:function(){
    			var that = this;
    			
    			var params = {};
    			params.ITEM_CODE = $("#code").val();
    			
    			 $.post("${pageContext.request.contextPath}/Portal/portal/API01.do",params,function(result){ 
    				 if(result.state==600){
    					 layer.msg(result.msg, {icon: 2});
    					 that.initEditInfo();
    				 }else if(result.state==100){
    					 layer.msg(result.msg, {icon: 2});	
    				 }else if(result.state==200){
    					 layer.msg(result.msg, {icon: 1});	 
    				 } else if(result.state==300){
    					 layer.msg(result.msg, {icon: 2});
    				 }else{
    					 layer.msg(result.msg, {icon: 2});
    				 }
    				 
    			 });
    			
    			return that;
    		 },
    		 initEditInfo:function(){
    			 var that = this;
				 that.initBirthDatePick();
				 
				 var params={};
				 params.PARENT='province_city_area';				 
    			  $.post("${pageContext.request.contextPath}/Portal/portal/GPVE01.do",params,function(result){   
    				  var ss = result;
    				 var html ="";
    				 if(result.state==200){
    					 html +='<option value="-1" selected="true">"请选择省"</option>';
    					 for(var i=0;i<result.data.length;i++){
    						 html +='<option value="'+result.data[i].CODE+'">"'+result.data[i].NAME+'"</option>';	 
    					 } 
    					 $("#user_province").html(html);
    				 }
    			 })  				 
				 $('#myModal').modal("show")
				 return that;
    		 },
    		 initCityInfo:function(provinceId){				 				 
				 var params={};
				 params.PARENT=provinceId;				 
	   			  $.post("${pageContext.request.contextPath}/Portal/portal/GPVE01.do",params,function(result){   
					  var ss = result;
					 var html ="";					 
					 if(result.state==200){ 
						 html +='<option value="-1" selected="true">"请选择市"</option>';
						 for(var i=0;i<result.data.length;i++){
							 html +='<option value="'+result.data[i].CODE+'">"'+result.data[i].NAME+'"</option>';	 
						 } 
						 $("#user_city").html(html);
					 }
				  })  
    		 },
    		 getItemInfo:function(){
    			 var that = this;    			 
    			 var params={};
    			 params.CODE=$("#code").val();    			 
    			 $.post("${pageContext.request.contextPath}/Portal/portal/GSI01.do?rnd="+Math.random(),params,function(result){
    				 try{
        				 if(result.state==200){
        					 if(result.data.CATEGLORY_NAME){
        						 $("#categlory_name").text(result.data.CATEGLORY_NAME);	 
        					 }else{
        						 $("#categlory_name").text("");
        					 }
        					 if(result.data.STATUS){
        						 if(result.data.STATUS==3){
            						 $("#STATUS").text("正在招募");
            					 }else{
            						 $("#STATUS").text("已招满");
            					 }	 
        					 }
        					 
        					 //$("#STATUS").text(result.data.STATUS);
        					 if(result.data.SEX){
        						 $("#SEX").text(result.data.SEX);	 
        					 }else{
        						 $("#SEX").text("");
        					 }
        					 if(result.data.AGE_START && result.data.AGE_END){
        						 $("#AGE").text(result.data.AGE_START+"-" +result.data.AGE_END+"岁");
        					 }else{
        						 $("#AGE").text("");
        					 }
        					 if(result.data.MARRIAGE){
        						 $("#MARRIAGE").text(result.data.MARRIAGE);	 
        					 }else{
        						 $("#MARRIAGE").text("");
        					 }
        					 if(result.data.SPECIALITIES){
        						 $("#SPECIALITIES").text(result.data.SPECIALITIES);
        					 }
        					 if(result.data.DISEASE){
        						 $("#DISEASE").text(result.data.DISEASE);
        					 }
        					 if(result.data.START_DATE){
        						 $("#START_DATE").text(result.data.START_DATE);
        					 }
        					 if(result.data.PHONE_NUMBER){
        						 $("#PHONE_NUMBER").text(result.data.PHONE_NUMBER); 
        					 }
        					 if(result.data.CONTACTS){
        						 $("#CONTACTS").text(result.data.CONTACTS);
        					 }
        					 if(result.data.STANDARD){
        						 $("#STANDARD").html(result.data.STANDARD);  
        					 }
        					 if(result.data.INTRODUCE){
        						 $("#INTRODUCE").html(result.data.INTRODUCE);  
        					 }
        					 if(result.data.RESEARCH){
        						 $("#RESEARCH").html(result.data.RESEARCH);  
        					 }        					 
        					
        				 }else{
        					 
        				 }
    				 }catch(e){
    					 
    				 }
    			 })     			    			 
    			 return that;
    		 },
    		 initBirthDatePick:function(){
    			 var that = this;
                 $('#user_birth').datetimepicker({
                     format: 'yyyy-mm-dd',
                     weekStart: 1,
                     autoclose: true,
                     todayBtn:  1, 
                     startView: 2,
                     todayHighlight: 1,
                     showMeridian: 1,
                     minView: 3,
                     forceParse: false,
                     language: 'zh'
                 });      			 
    			 return that;
    		 }
     }
     
     $(function(){
    	 page.init();
     })
  </script>
  
  
</body>
</html>